00:00:00

Web Development From Scratch

Notes

What is this course about?

  • Learn basic HTML5, CSS and Javascript from scratch
  • No pre-requisite necessary

Notes

1. HTML5

What is HTML5?

  • HTML5 is the latest version of HyperText Markup Language, or HTML
  • It is the language of the Web
  • It describes the structure and content of web pages
  • It is used together with CSS (Cascading StyleSheet) and Javascript to make web pages rich and interactive

By the end of this chapter

  • Make a self profile page

Notes

Starting very simply

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Carl Fredricksen's Profile</title>
  </head>
  <body>
    Welcome to Carl Fredricksen's Profile page!
  </body>
</html>
  • HTML5 is made up of tags that usually come in nested pairs
  • ... like <X> <Y> ... </Y> </X>
  • The top-most tag is <html>, which has two child tags: <head> and <body>
  • <title> is a child tag of <head>
  • Content of the web page goes inside the <body> tag

Notes

A very simple web page

Notes

Images and links

1
2
3
4
5
6
<body>
  Welcome to Carl Fredricksen's Profile page!
  <img src='img/mugshot.jpg'>
  Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a> to go to my wiki page.

</body>
  • Tags have attributes (or properties), specified like name='value'
  • Did you notice?
    • <img> has no closing tag
    • Browser ignores line breaks. How do we change that?

Notes

Images and links

Notes

Headings, paragraphs and text format

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<body>
  <h1>Welcome to Carl Fredricksen's Profile page!</h1> 
  <p><img src='img/mugshot.jpg'></p>
  <h3>Links</h3>
  <p>Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a> 
     to go to my wiki page.
  </p>
  <h3>Hobbies</h3>
  <p>I <strong>love</strong> travelling, 
     <em>especially</em> by balloons.
  </p>
</body>
  • 5 levels of headings: from <h1> to <h5>
  • <p> is used to organize text into paragraphs
  • <em> (emphasis) is for italics, <strong> is for bold

Notes

Headings, paragraphs and text format

Notes

Tables

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<table>
    <tr> <td>Name</td> <td>Carl Fredricksen</td> </tr>
    <tr> <td>Age</td> <td>78</td> </tr>
    <tr> <td>Occupation</td> <td>Retiree</td> </tr>            
    <tr> <td>Email</td> 
         <td><a href='mailto:carl@paradisefalls.org'>
                carl@paradisefalls.org
             </a>
         </td>
    </tr>
</table>

Notes

Tables

Notes

Lists, ordered and unordered

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<h3>Friends</h3>
<ul>
  <li>Russell</li>
  <li>Dug</li>
  <li>Kevin</li>
</ul>
<h3>Countries travelled</h3>
<ol>
  <li>Venezuela</li>
</ol>
  • <ul> is unordered list - bullets are not numbered
  • <ol> is ordered list - bullets are numbered
  • <li> is list item, can be used in either <ol> or <ul>
  • A list can be nested inside another one

Notes

Lists, ordered and unordered

Notes

2. CSS

Notes

What is CSS?

  • Cascading StyleSheet
  • It describes the format, style and layout of web pages

By the end of this chapter

  • Format the self profile page like this

Notes

What is CSS?

Notes

Directory structure

Use the following structure to keep things neat and allow for future expansion

my_profile_dir
 |
 |-- css
 |    |
 |    |-- main.css
 |
 |-- img
 |    |
 |    |-- mugshot.jpg
 |
 |-- index.html

Notes

Embedding CSS in web page

1
2
3
4
<head>
  <title>Carl Fredricksen's Profile</title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

Notes

Introducing the <div> HTML tag

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
  <div id='container'>
    <div id='header'>
    </div>
    <div id='overview'>
    </div>
    <div id='mugshot'>
    </div>
    <div id='detail'>
    </div>
    <div id='footer'>
    </div>
  </div>
</body>
  • Used like containers to group content to sections
  • Works together with CSS to format web pages
  • Give them unique names using the id attribute

Notes

Moving content inside <div>s

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div id='container'>
  <div id='header'>
    <h1>Welcome to Carl Fredricksen's Profile page</h1>
  </div>
  <div id='overview'>
    <table>
        <tr><td>Name</td> <td>Carl Fredricksen</td></tr>
        <tr><td>Age </td> <td>78</td></tr>
        <tr><td>Occupation</td> <td>Retiree</td></tr>            
        <tr><td>Email</td> 
            <td><a href='mailto:carl@paradisefalls.org'>
            carl@paradisefalls.org</a></td>
        </tr>
    </table>
  </div>
  ...
</div>

Notes

Changing colors

1
2
3
4
5
body 
{
    color: #333333;
    background-color: #a7a09a;
}
  • body is called the selector
  • {...} contains properties and values being set
  • #333333 and #a7a09a are RGB color codes

Notes

Changing colors

Notes

The RGB color code

The RGB color model

  • Uses a mixture of Red, Green and Blue components to represent colors
  • A number from 0 to 255 represents the 'intensity' of the component, written in base-16, i.e. from 00 to ff. Quiz: how many colors can RGB represent?
  • For example: #ff0000 is red, #ffff00 is yellow
  • The RBG calculator: https://www.w3schools.com/colors/colors_rgb.asp

Notes

The selector - 1

  • "Selects" the HTML element(s) whose properties are to be modified
  • 3 basic kinds:
    • by element type, e.g. body { ... }
    • by element id, e.g. #header { ... }
    • by element class, e.g. .someclass { ... }
  • Mix-and-match
    • example 1: div#header { ... }
    • example 2: div h1 { ... }
    • example 3: #header h1, #header h2 { ... }

Can you guess what each of selectors in the above examples do?

Notes

The selector - 2

  • example 1: div#header { ... }
    • The <div id='header'> element is selected
  • example 2: div h1 { ... }
    • All <h1> elements that are inside any <div> element are selected
  • example 3: #header h1, #footer h2 { ... }
    • All <h1> elements that are inside any HTML elements with id='header', plus all <h2> elements that are inside any HTML elements with id='footer' are selected
  • Selector syntax is complex

Notes

What are the properties I can change?

Notes

Before we go further ...

Let's give each <div> a different background color. This will help our eyes when we re-arrange them.

Notes

Changing background color of all divs

Notes

Changing fonts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
#header h1
{
    font-family: 'Impact';
}
#overview
{
    ...
    font-family: 'Helvetica';
    font-size: 20pt;
}
#detail
{
    ...
    font-family: 'Helvetica';
    font-size: 16pt;
}
#footer
{  
    font-family: 'Courier New';
    font-size: 12pt;
}

Notes

Changing fonts

Notes

The Box Model

The Box Model

Notes

Centering the page

1
2
3
4
5
6
7
8
9
#container
{
    max-width: 750px;
    margin-top:    0;
    margin-bottom: 0; 
    margin-left:   auto;
    margin-right:  auto;
    background-color: #99c;
}
  • max-width
    • when browser is larger, element's width is set to 750px; when browser is smaller, the element will be automatically resized
  • auto for margin
    • Browser will automatically determine the margin size using any space left.
    • This has a centering effect when used for left and right margins.

Notes

Centering the page

Notes

Putting <div>s side-by-side

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#overview
{
    float: left;
    width: 550px;
}
#mugshot
{
    float: right;
    width: 200px;
}
#mugshot img
{
    display: block; /* what does this line do??? ;-) */
    max-width: 100%;
    max-height: 100%;
}
  • float allows elements to be side by side, instead of one after another

Notes

Putting divs side by side

Notes

Staying clear of floated elements

1
2
3
4
5
#detail
{
    ...
    clear: both;
}
  • Did you notice the 'detail' section went under the mugshot?
    • This happens to elements next to floated ones
    • Solution: clear: both;

Notes

Staying clear of floated elements

Notes

Using Chrome to troubleshoot

  • What is this gap? Let's use Chrome's Developer Tool to find out

What is this?

Notes

Use Chrome to troubleshoot

Notes

Margin collapsing

  • "The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing." - MDN
  • Occurs when parent has no margin or padding to separate itself from its first or last child
  • The collapsed margin ends up outside the parent

Notes

Margin collapsing - the fix

1
2
3
4
5
div
{
    padding-top: 0.1px;
    padding-bottom: 0.1px;
}

Notes

Margin collapsing the fix

Notes

Final touches - 1

Add paddings to make things look less crammed

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#overview
{
    padding-top:    5px;
    padding-bottom: 5px;
    padding-left:  15px;
    padding-right: 15px;
}
#detail
{
    padding: 5px 15px;       
}
#footer
{
    padding: 5px 15px;        
}

Notes

Final touches 1

Notes

Finak touches - 1 what's wrong?

Need to subtract left and right padding from width

1
2
3
4
5
6
7
8
#overview
{
    width: 520px;         /* was 550px */
    padding-top:    5px;
    padding-bottom: 5px;
    padding-left:  15px;
    padding-right: 15px;        
}

Notes

Final touches 1 what's wrong

Notes

Final touches - 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
body
{
    margin: 0;
}
#header h1
{
    text-align: center; 
}
td#fieldname
{
    width: 40%;
}
#overview
{
    background-color: #9cc;
}

Notes

Final touches 2

Notes

3. Javascript

Notes

Notes